<template>
	<div>
		<br />
		<h4>留言墙</h4>

		<hr />
		<textarea placeholder="我想对这面墙说..." maxlength="180" style="height:120px" v-model="msg"></textarea>
		<mt-button class="mu-add" type="primary" size="large" @click="postComment">留言</mt-button>

		<div class="cmt-list" v-for="(item, i) in comments" :key="item.add_time">
			<div class="cmt-item">
				<!-- 第{{i+1}} -->
				<div class="cmt-title">第{{ i + 1 }}楼 用户：可爱用户 {{ item.add_time | dateFormat }}</div>
				<div class="cmt-body">{{ item.content }}</div>
			</div>
			<!-- <div class="cmt-item">
				<div class="cmt-title">第2楼 用户：匿名用户 2020-1-28 18:00</div>
				<div class="cmt-body">我们一直在</div>
			</div>
			<div class="cmt-item">
				<div class="cmt-title">第3楼 用户：匿名用户 2020-1-28 18:00</div>
				<div class="cmt-body">此用户很懒</div>
			</div> -->
		</div>
	</div>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
	data() {
		return {
			//默认展示第一页数据
			comments: [], //所有的评论数据
			msg: '', //评论输入的内容
			arr: [],
		}
	},
	created() {
		this.getComments()
		// this.postComment()
	},
	methods: {
		getComments() {
			this.comments = JSON.parse(localStorage.getItem('arr'))
		},
		postComment() {
			if (this.msg.trim().length === 0) {
				return Toast('评论内容不能为空')
			}
			var cmt = { add_time: Date.now(), content: this.msg.trim() }
			this.comments.unshift(cmt)
			this.msg = ''
			localStorage.setItem('arr', JSON.stringify(this.comments))

			// this.comments.push(cmt)
			console.log(this.comments)
		},
	},
	props: ['id'],
}
</script>
<style lang="">
h4 {
	width: 100%;
	text-align: center;
	font-size: 20px;
}
.mu-add {
	background-color: rgb(238, 134, 151);
}
.mu-addmore {
	background-color: rgba(173, 20, 45, 0.3);
}
.cmt-title {
	background-color: rgba(250, 237, 247, 0.836);
	margin: 8px 0;
	height: 24px;
	line-height: 30px;
	font-size: 16px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.cmt-body {
	text-indent: 2em;
	font-size: 14px;
}
</style>
